import { defineStore } from "pinia";
import { ref, computed } from "vue";
import { useUserStore } from "./userStore";
import { insertCartAPI, getNewCartListAPI, delCartAPI } from "./cart";

export const useCartStore = defineStore(
  "cart",
  () => {
    const userStore = useUserStore();
    const isLogin = computed(() => userStore.userInfo.token);

    // 1. 定义state - cartList
    const cartList = ref([]);
    // 获取最新的购物车列表 action
    const updateNewList = async () => {
      const res = await getNewCartListAPI();
      // console.log(res);
      cartList.value = res.result;
    };

    // 2. 定义action - addCart
    const addCart = async (goods) => {
      // if (isLogin.value) {
      //   // 已登录，使用接口购物车
      //   const { skuId, count } = goods;
      //   await insertCartAPI({ skuId, count });
      //   updateNewList();
      // } else {
      //   // 未登录，使用本地购物车
      //   console.log("添加", goods);
      //   // 遍历cartList，看看是否已添加goods
      //   const item = cartList.value.find((item) => goods.skuId === item.skuId);
      //   if (item) {
      //     // 若已添加该商品，则相应的数量+1
      //     item.count++;
      //   } else {
      //     // 否则添加商品
      //     cartList.value.push(goods);
      //   }
      // }

      console.log("添加", goods);
      // 遍历cartList，看看是否已添加goods
      const item = cartList.value.find((item) => goods.skuId === item.skuId);
      if (item) {
        // 若已添加该商品，则相应的数量+1
        item.count++;
      } else {
        // 否则添加商品
        cartList.value.push(goods);
      }
    };

    // 点击 下单结算 时触发
    const settleCart = async () => {
      if (isLogin) {
        const selectedItems = cartList.value.filter((item) => item.selected);
        for (const item of selectedItems) {
          // 调用 API 插入购物车
          await insertCartAPI({ skuId: item.skuId, count: item.count });

          // 从本地cartList删除该项
          const index = cartList.value.findIndex((i) => i.skuId === item.skuId);
          if (index !== -1) {
            cartList.value.splice(index, 1);
          }
        }
      }
    };

    // 删除购物车
    const delCart = async (skuId) => {
      if (isLogin) {
        // 调用接口实现接口购物车的删除功能
        await delCartAPI([skuId]);
        updateNewList();
      } else {
        const idx = cartList.value.findIndex((item) => skuId === item.skuId);
        cartList.value.splice(idx, 1);
      }
    };

    // 清除购物车（退出登录时调用）
    const clearCart = () => {
      cartList.value = [];
    };

    // 计算头部购物车的商品数量
    const totalCount = computed(() => {
      return cartList.value.reduce((total, item) => total + item.count, 0);
      // 把 cartList.value 中所有商品的 count 相加，得到总数量，作为一个响应式的计算值返回， 并且初始值为0。
    });

    // 计算头部购物车的商品总价
    const totalPrice = computed(() => {
      // 所有项的count * price之和
      return cartList.value.reduce((total, item) => total + item.count * item.price, 0);
    });

    // 计算列表购物车的选中的商品数量
    const allCheckedCount = computed(() => {
      let res = 0;
      cartList.value.forEach((item) => {
        if (item.selected) {
          res += item.count;
        }
      });
      return res;
    });

    // 计算列表购物车的选中的商品总价格
    const allCheckedPrice = computed(() =>
      cartList.value.reduce((sum, item) => {
        return item.selected ? sum + item.count * item.price : sum;
      }, 0)
    );

    // 勾选列表购物车的单选框
    const singleCheck = (skuId, selected) => {
      // 找到与skuId相符的项
      const item = cartList.value.find((item) => skuId === item.skuId);
      // 更新该项的selected的值
      item.selected = selected;
    };

    // 计算全选框是否选中
    const isAll = computed(() => {
      return cartList.value.every((item) => item.selected === true);
    });

    // 全选功能
    const allCheck = (selected) => {
      console.log(selected);
      cartList.value.forEach((item) => {
        // 把cartList中的每一项的selected都设置为当前的全选框状态
        item.selected = selected;
      });
    };

    return {
      cartList,
      addCart,
      delCart,
      clearCart,
      updateNewList,
      settleCart,
      totalCount,
      totalPrice,
      singleCheck,
      isAll,
      allCheck,
      allCheckedCount,
      allCheckedPrice,
    };
  },
  {
    persist: true,
  }
);
